Combo Chart গুগল চার্টের একটি শক্তিশালী ফিচার, যা একসাথে একাধিক ডেটা সিরিজের (Multiple Data Series) ভিজ্যুয়ালাইজেশন করতে সাহায্য করে। এটি বিভিন্ন ধরনের চার্টের সমন্বয়ে তৈরি হয়, যেমন Bar Chart এবং Line Chart। Combo Chart আপনাকে একাধিক ডেটা সেগমেন্ট বা ক্যাটেগরির মধ্যে তুলনা করতে সক্ষম করে।
Combo Chart এর সুবিধা
- একাধিক ডেটা সিরিজ একসাথে প্রদর্শন করতে সহায়ক।
- বিভিন্ন ধরনের চার্ট একত্রে ব্যবহারের মাধ্যমে ডেটার উপর বিস্তারিত বিশ্লেষণ করা যায়।
- তুলনা বা সম্পর্ক বিশ্লেষণের জন্য খুবই কার্যকরী।
Combo Chart তৈরি করার জন্য প্রয়োজনীয় ধাপ
Combo Chart তৈরি করতে আপনি দুটি প্রধান ধাপ অনুসরণ করবেন:
- ডেটা প্রস্তুত করা।
- Combo Chart এর জন্য সেটিংস এবং অপশন কাস্টমাইজ করা।
নিচে Combo Chart তৈরির একটি উদাহরণ দেওয়া হলো।
Combo Chart তৈরি করার উদাহরণ
ধরা যাক, আমাদের কাছে একটি কোম্পানির Sales এবং Profit ডেটা রয়েছে এবং আমরা চাই একে Bar Chart এবং Line Chart এর মাধ্যমে প্রদর্শন করতে।
উদাহরণ কোড:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Combo Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'combo']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Profit', 'Expenses'],
['2020', 1000, 400, 200],
['2021', 1170, 460, 250],
['2022', 660, 1120, 300],
['2023', 1030, 540, 350]
]);
var options = {
title: 'Company Performance',
vAxis: {title: 'Amount (in USD)'},
hAxis: {title: 'Year'},
seriesType: 'bars', // Default type for the first series is 'bar'
series: {
1: {type: 'line'}, // The second series will be a line chart (Profit)
2: {type: 'line', lineWidth: 3, pointSize: 5} // The third series will also be a line chart (Expenses)
},
legend: { position: 'bottom' }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Combo Chart Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোডের ব্যাখ্যা
- ডেটা প্রস্তুত করা: আমরা
google.visualization.arrayToDataTableফাংশন ব্যবহার করে ডেটা প্রস্তুত করেছি। এখানে তিনটি ভিন্ন ডেটা সিরিজ রয়েছে:- Sales (Bar Chart হিসেবে প্রদর্শিত হবে)
- Profit (Line Chart হিসেবে প্রদর্শিত হবে)
- Expenses (Line Chart হিসেবে প্রদর্শিত হবে)
- Combo Chart অপশন কাস্টমাইজ করা:
- seriesType: প্রথম সিরিজটি Bar Chart হিসেবে এবং পরবর্তী দুটি সিরিজ Line Chart হিসেবে প্রদর্শিত হবে।
- series: এখানে আমরা সিরিজের ধরন কাস্টমাইজ করেছি। প্রথম সিরিজটি Bar হিসেবে এবং দ্বিতীয় ও তৃতীয় সিরিজটি Line হিসেবে প্রদর্শিত হবে।
- lineWidth এবং pointSize: দ্বিতীয় ও তৃতীয় সিরিজের লাইনের প্রস্থ এবং পয়েন্ট সাইজ কাস্টমাইজ করা হয়েছে।
- Legend: লেজেন্ডের অবস্থান bottom এ নির্ধারণ করা হয়েছে যাতে প্রতিটি ডেটা সিরিজের সাথে সম্পর্কিত চিহ্ন দেখানো যায়।
Combo Chart এর আরো কাস্টমাইজেশন
- Axis Labels:
- আপনি X-axis এবং Y-axis এর লেবেল কাস্টমাইজ করতে পারেন যেমন আগের উদাহরণে করা হয়েছিল।
- Data Point Customization:
- আপনি Line Chart এর পয়েন্ট সাইজ এবং স্টাইল কাস্টমাইজ করতে পারেন, যেমন
pointSize: 5এর মাধ্যমে পয়েন্টের সাইজ পরিবর্তন করা হয়েছে।
- আপনি Line Chart এর পয়েন্ট সাইজ এবং স্টাইল কাস্টমাইজ করতে পারেন, যেমন
- Colors and Styles:
- আপনি সিরিজের রঙ এবং স্টাইলও কাস্টমাইজ করতে পারেন, যেমন:
color: 'red'দিয়ে লাইনের রঙ পরিবর্তন করা।
- আপনি সিরিজের রঙ এবং স্টাইলও কাস্টমাইজ করতে পারেন, যেমন:
উপসংহার
Google Charts এর Combo Chart একটি শক্তিশালী টুল যা আপনাকে একাধিক ডেটা সিরিজ একসাথে প্রদর্শন করতে সাহায্য করে। এটি বিভিন্ন ধরনের চার্টকে একত্রে ব্যবহার করে ডেটার উপর আরও বিস্তারিত বিশ্লেষণ এবং তুলনা করতে সহায়ক। Combo Chart এর মাধ্যমে আপনি Bar Chart এবং Line Chart একসাথে উপস্থাপন করতে পারেন, যা ব্যবহারকারীদের জন্য ডেটা বোঝা সহজ করে তোলে।
Read more
